<div class="power-forecast-container">
  <section class="power-forecast-main flex flex-column flex-full">
    <header class="forecast-main-header flex">
      <div class="years flex-full">
        <span class="farm-name"><i></i></span>
        <span (click)=onClickHeader(1) [ngClass]="{active:active==1}">日</span>
        <span (click)=onClickHeader(2) [ngClass]="{active:active==2}">月</span>
        <span (click)=onClickHeader(3) [ngClass]="{active:active==3}">年</span>        
      </div>
      <div class="time-choose flex-full flex">
        <span>选择时间：</span>
        <span>
          <span *ngIf="active==3 || active==2">   
              <select class="yearT" [ngModel]="startYear" (ngModelChange)="onChangeStartYear($event)">
                  <option [value]="year" *ngFor="let year of years" > {{year}} </option>               
              </select>
              年
            <span *ngIf="active==2">   
              <select class="month" [ngModel]="startMonth" (ngModelChange)="onChangeStartMonth($event)">
                <option [value]="month" *ngFor="let month of months" > {{month}}</option>       
              </select>
              月
            </span>
            <span class="toTime">---</span>
              <select class="yearT" [ngModel]="currentYear" (ngModelChange)="onChangeYear($event)">
                  <option [value]="year" *ngFor="let year of years" > {{year}} </option>               
              </select>
              年
            <span *ngIf="active==2">   
              <select class="month" [ngModel]="currentMonth" (ngModelChange)="onChangeMonth($event)">
                <option [value]="month" *ngFor="let month of months" > {{month}}</option>       
              </select>
              月
            </span>
          </span>   
        </span>

        <span *ngIf="active==1">
          <p-calendar [(ngModel)]="startDay" [locale]="en"></p-calendar>
          <span>---</span>          
          <p-calendar [(ngModel)]="currentDay" [locale]="en"></p-calendar>
        </span>
        <button class="button" (click)="onSearch()">查询</button>

      </div>

    </header>
    <section class="forecast-main-content flex-full">
      <app-power-deviation-table [ngClass]="{'forecast-table':true,on:active==3}"  [titles]="titles" [powersList]="powersYear"></app-power-deviation-table>
      <app-power-deviation-table [ngClass]="{'forecast-table':true,on:active==2}"  [titles]="titles" [powersList]="powersMonth"></app-power-deviation-table>
      <app-power-deviation-table [ngClass]="{'forecast-table':true,on:active==1}"  [titles]="titles" [powersList]="powersDate"></app-power-deviation-table>
    </section>
  </section>
</div>